<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        float: left;
        width: 100px;
        height: 100px;
    }

    div img {
        width: 100%;
        height: 100%;
    }
</style>

<body>

    <script>
        let datas = [
            { name: '司马懿', imgSrc: 'images/1.png' },
            { name: '女娲', imgSrc: 'images/2.png' },
            { name: '百里守约', imgSrc: 'images/3.png' },
            { name: '亚瑟', imgSrc: 'images/4.png' },
            { name: '虞姬', imgSrc: 'images/5.png' },
            { name: '张良', imgSrc: 'images/6.png' },
            { name: '安其拉', imgSrc: 'images/7.png' },
            { name: '李白', imgSrc: 'images/8.png' },
            { name: '阿珂', imgSrc: 'images/9.png' },
            { name: '墨子', imgSrc: 'images/10.png' },
        ]
        for (let i = 0; i < datas.length; i++) {
            document.write(`
            <div>
                 <img src="${datas[i].imgSrc}" alt="${datas[i].name}">
            </div>
            `)
        }

    </script>
</body>

</html>